<template>
  <!-- 主题详情对话框 -->
  <el-dialog title="主题详情" :model-value="detailDialog.visible" @update:model-value="(val) => emit('update:detailDialog', { ...detailDialog, visible: val })" width="1000px" append-to-body>
    <div v-if="detailDialog.data">
      <el-descriptions :column="2" border>
        <el-descriptions-item label="主题名称">{{ detailDialog.data.topicName }}</el-descriptions-item>
        <el-descriptions-item label="主题类型">
          <el-tag :type="getTopicTypeTag(detailDialog.data.topicType)">{{ getTopicTypeText(detailDialog.data.topicType) }}</el-tag>
        </el-descriptions-item>
        <el-descriptions-item label="QoS等级">
          <el-tag :type="getQosTag(detailDialog.data.qosLevel)" size="small">QoS {{ detailDialog.data.qosLevel }}</el-tag>
        </el-descriptions-item>
        <el-descriptions-item label="订阅数">{{ detailDialog.data.subscriberCount }}个</el-descriptions-item>
        <el-descriptions-item label="消息数">{{ detailDialog.data.messageCount }}条</el-descriptions-item>
        <el-descriptions-item label="最后消息时间">{{ detailDialog.data.lastMessageTime }}</el-descriptions-item>
        <el-descriptions-item label="保留消息">
          <el-tag :type="detailDialog.data.retainMessage ? 'success' : 'info'" size="small">
            {{ detailDialog.data.retainMessage ? '是' : '否' }}
          </el-tag>
        </el-descriptions-item>
        <el-descriptions-item label="权限控制">
          <el-tag :type="detailDialog.data.accessControl ? 'warning' : 'success'" size="small">
            {{ detailDialog.data.accessControl ? '受限' : '开放' }}
          </el-tag>
        </el-descriptions-item>
        <el-descriptions-item label="状态">
          <el-tag :type="detailDialog.data.status === '1' ? 'success' : 'danger'">{{ detailDialog.data.status === '1' ? '启用' : '禁用' }}</el-tag>
        </el-descriptions-item>
        <el-descriptions-item label="创建时间">{{ detailDialog.data.createTime }}</el-descriptions-item>
        <el-descriptions-item label="更新时间">{{ detailDialog.data.updateTime }}</el-descriptions-item>
        <el-descriptions-item label="主题描述" :span="2">{{ detailDialog.data.description }}</el-descriptions-item>
      </el-descriptions>
    </div>
  </el-dialog>
</template>

<script setup lang="ts">
// Props
interface Props {
  detailDialog: {
    visible: boolean
    data: any
  }
  getTopicTypeTag: (type: string) => string
  getTopicTypeText: (type: string) => string
  getQosTag: (qos: string) => string
}

const props = defineProps<Props>()

// Emits
const emit = defineEmits(['update:detailDialog'])
</script>

<style scoped>
/* 详情对话框样式 */
.el-descriptions {
  margin-top: 20px;
}
</style>